<template>
  <view class="more-panel" v-if="show" @click="maskClick">
    <view class="panel-content">
      <button v-for="item in moreBtns" :key="item.key" @click="moreBtnClick(item)">
        {{ item.name }}
      </button>
    </view>
    <view class="panel-bar" @click.stop="true">
      <view>{{ isSwitchOn ? "创建" : "列表" }}</view>
      <switch :checked="isSwitchOn" @change="switchChange" />
    </view>
  </view>
</template>

<script>
import { PagesPath } from "../../common/pagesPath";
export default {
  props: ["show"],
  emits: ["update:show"],
  data() {
    return {
      isSwitchOn: false, // 初始化开关为关闭状态
      timer: -1,
      moreBtns: [
        {
          name: "标签",
          key: "label",
        },
        {
          name: "分类",
          key: "category",
        },
        {
          name: "地址",
          key: "addr",
        },
        {
          name: "人员",
          key: "agent",
        },
        {
          name: "实体",
          key: "entry",
        },
        {
          name: "收藏",
          key: "favorite",
        },
        {
          name: "计划",
          key: "plan",
        },
        {
          name: "规划",
          key: "planSeg",
        },
        {
          name: "天气",
          key: "weather",
        },
      ],
    };
  },
  destroyed() {
    clearTimeout(this.timer);
    this.$emit("update:show", false);
    this.isSwitchOn = false;
  },
  methods: {
    maskClick() {
      this.timer = setTimeout(() => {
        this.$emit("update:show", false);
      }, 200);
    },
    moreBtnClick(item) {
      const path = PagesPath.getPath(item.key, this.isSwitchOn ? "create" : "list");
      if (!path) {
        console.warn(`path的值不存在，${item.key}, ${item.name}`);
        return;
      }
      console.log("========" + path);
      uni.navigateTo({
        url: path,
      });
    },
    switchChange: function (event) {
      this.isSwitchOn = event.detail.value; // 获取开关状态
    },
  },
};
</script>

<style lang="scss">
.more-panel {
  position: fixed;
  background-color: rgba(0, 0, 0, 0.3);
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  z-index: 100;

  .panel-bar {
    position: absolute;
    bottom: 45%;
    right: 40px;
    font-size: 15px;
    text-align: center;
  }

  .panel-content {
    position: absolute;
    bottom: 30%;
    right: 100px;
    width: 270px;
    display: flex;
    flex-wrap: wrap;
    background-color: #eeeeee;
    padding: 5px;
    border-radius: 5px;

    button {
      width: 80px;
      margin: 5px;
    }
  }
}
</style>
